<template>
  <view class="main">
    <navbar :config="config" backColor="#999999"></navbar>
    <view class="list">
      <view @click="checkCoupon(item,index)" v-for="(item,index) in listData" :key="index" class="item"
        :class="checkIndex===index?'checked':''">
        <view class="top">
          <view class="left">
            <view class="tag">{{modeList[item.mode].text}}</view>
            <text class="face-price">￥<text class="num">{{item.face_value}}</text></text>
          </view>
          <view class="right">
            <view class="tip">{{item.name}}</view>
            <view class="flex-box">
              <view>
                <text v-if="item.threshold" class="condition">满￥{{item.threshold}}可用</text>
                <text v-else class="condition">无门槛</text>
                <view v-if="isMyCoupon || isCheck" class="tip2">{{item.expire_time}}到期</view>
                <view v-else class="tip2">{{item.end_time}}到期</view>
              </view>
              <button v-if="isMyCoupon" @click="useTickets()">去使用</button>
              <button v-else-if="isCheck" v-show="checkIndex===index" class="no-have">已选择</button>
              <button v-else @click="grabTickets(item.id)" class="no-have">立即抢</button>
            </view>
          </view>
        </view>
        <view class="bottom" @click="$set(item,'isOpen',!item.isOpen)">
          <text class="time">领券后{{item.expired_day}}天有效，记得及时使用噢</text>
          <text class="iconfont2" :class="item.isOpen?'open':''">&#xe6cc;</text>
        </view>
        <view v-if="item.isOpen" class="desc">
          <text>{{item.content}}</text>
        </view>
      </view>
      <view>
        <noData v-if="listData.length<=0"></noData>
      </view>
    </view>
    <view v-if="isMyCoupon && loadStatus=='nomore'" class="go-center">没有更多券了！<text class="light"
        @click="goCouponCenter()">去领券中心领取＞</text></view>
    <u-loadmore v-else :status="loadStatus" />
  </view>
</template>

<script>
  import noData from "@/components/noData/nodata.vue"
  export default {
    components: {
      noData
    },
    data() {
      return {
        config: {
          back: true,
          title: '',
          color: 'black',
          backgroundColor: [1, '#fff'],
          statusBarFontColor: 'black'
        },
        // 优惠券类型
        modeList: [{
          text: '平台券'
        }, {
          text: '店铺券'
        }],
        // “我的优惠券”参数
        pageParams1: {
          page: 1,
          limit: 10,
          status: 0 // 0可以使用，1已使用，2，未使用已过期
        },
        // “领券中心”参数
        pageParams2: {
          page: 1,
          limit: 10,
          trait: 0
        },
        // “选择可使用的优惠券”参数
        pageParams3: {
          marketing_type: 0,
          total_amount_dec_shop_coupon: 0, // 支付总金额
          shop_order_list: [{
              total_amount_dec_shop_coupon: 0, //不含运费，扣出首单，扣除店铺优惠券的费用
              shop_id: '' // 店铺id
            },
            {
              total_amount_dec_shop_coupon: 0,
              shop_id: '',
            }
          ]
        },
        listData: [],
        loadStatus: 'loadmore', //loading / nomore
        isMyCoupon: false, // 是否为“我的优惠券”
        isCheck: false, // 是否为“选择可使用的优惠券”
        checkIndex: '',
        couponId: '' // 当前选择的优惠卷
      }
    },
    onLoad(option) {
      if (option.isMyCoupon) {
        this.isMyCoupon = true;
        this.config.title = '我的优惠券';
        this.getMyList(true);
      } else if (option.isCheck) {
        this.isCheck = true;
        this.couponId = option.couponId;
        this.config.title = '选择优惠券';
        this.pageParams3 = {
          ...this.pageParams3,
          ...JSON.parse(option.checkParams)
        }
        this.getMyCanUseList();
      } else {
        this.config.title = '领券中心'
        this.getList(true);
      }
    },
    onPullDownRefresh() {
      if (this.isMyCoupon) {
        this.getMyList(true);
      } else if (this.isCheck) {
        this.getMyCanUseList();
      } else {
        this.getList(true);
      }
      uni.stopPullDownRefresh();
    },
    methods: {
      // 我的优惠券列表
      getMyList(isRefresh, needLoading = false) {
        let that = this;
        if (!isRefresh && this.loadStatus == 'nomore') {
          return false;
        }
        this.pageParams1.page = isRefresh ? 1 : this.pageParams1.page + 1;
        this.listData = isRefresh ? [] : this.listData;
        if (needLoading) {
          uni.showLoading({
            title: '努力加载中...',
            mask: true
          });
        }
        this.loadStatus = 'loading';
        this.$http.get('/couponreceiverecord/page', this.pageParams1)
          .then(res => {
            if (res.code == 200) {
              let listData = that.listData;
              listData.push(...res.page.list);
              that.listData = listData;
              that.loadStatus = that.listData.length >= res.page.totalCount ? 'nomore' : 'loadmore';
            }
          })
          .finally(() => {
            if (needLoading) {
              uni.hideLoading();
            }
          })
      },
      // 领券中心列表
      getList(isRefresh, needLoading = false) {
        let that = this;
        if (!isRefresh && this.loadStatus == 'nomore') {
          return false;
        }
        this.pageParams2.page = isRefresh ? 1 : this.pageParams2.page + 1;
        this.listData = isRefresh ? [] : this.listData;
        if (needLoading) {
          uni.showLoading({
            title: '努力加载中...',
            mask: true
          });
        }
        this.loadStatus = 'loading';
        this.$http.get('/coupon/page', this.pageParams2)
          .then(res => {
            if (res.code == 200) {
              let listData = that.listData;
              listData.push(...res.page.list);
              that.listData = listData;
              that.loadStatus = that.listData.length >= res.page.totalCount ? 'nomore' : 'loadmore';
            }
          })
          .finally(() => {
            if (needLoading) {
              uni.hideLoading();
            }
          })
      },
      // 我可以使用的优惠券列表
      getMyCanUseList() {
        this.loadStatus = 'loading';
        this.$http.post('/select/platcoupon', this.pageParams3)
          .then(res => {
            if (res.code == 200) {
              this.listData = res.list;
              this.loadStatus = 'nomore';
              //显示默认使用的优惠券
              for (let i in res.list) {
                if (res.list[i].id == this.couponId) {
                  this.checkIndex = i * 1;
                  break;
                }
              }
            }
          })
      },
      //领券
      grabTickets(id) {
        uni.showLoading({
          title: '正在提交中...',
          mask: true
        });
        this.$http.post(`/couponreceiverecord/receive/${id}`, {})
          .then(res => {
            if (res.code == 200) {
              uni.showToast({
                icon: 'success',
                title: '领券成功'
              })
              //获取上一个页面
              var pages = getCurrentPages();
              if (pages.length > 1) {
                var beforePage = pages[pages.length - 2];
                if (beforePage.$vm.isMyCoupon) {
                  beforePage.$vm.getMyList(true);
                }
              }
            }
          })
          .finally(() => {
            uni.hideLoading();
          })
      },
      goCouponCenter() {
        uni.navigateTo({
          url: '/pages/couponCenter/index'
        })
      },
      useTickets() {
        uni.redirectTo({
          url: '/pages/index/lidaPage'
        })
      },
      // 选择优惠券
      checkCoupon(item, index) {
        if (this.isCheck) {
          if (this.checkIndex === index) {
            this.checkIndex = '';
          } else {
            this.checkIndex = index;
          }
        }
        let params = {
          couponId: 0,
        }
        if (this.checkIndex !== '') {
          params = {
            my_coupon_id: item.id
          }
        }
        //获取上一个页面
        var pages = getCurrentPages();
        if (pages.length > 1) {
          var beforePage = pages[pages.length - 2];
          if (beforePage.$vm.changeCoupon) {
            beforePage.$vm.changeCoupon(params);
          }
        }
      }
    },
    onReachBottom() {
      if (this.isMyCoupon) {
        this.getMyList();
      } else if (this.isCheck) {

      } else {
        this.getList();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    min-height: 100vh;
    background-color: rgba(253, 253, 253, 1);
    padding: 0 0 50rpx 0;

    .go-center {
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #808080;
      margin-top: 60rpx;

      .light {
        color: #00A7E6;
      }
    }

    .list {
      .item {
        position: relative;
        width: 690rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin: 40rpx auto 0 auto;
        box-sizing: border-box;
        // background-image: url('https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/couponCenter/card.png');
        // background-size: 100% 100%;
        // background-position: top;
        // background-repeat: no-repeat;
        padding-bottom: 19rpx;
        filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.1));

        &.checked {
          background: #fff8e1;

          button {
            background: #ffb74d !important;
            border-color: #ffb74d !important;
          }
        }

        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px dashed #cccccc;
          ;
          padding: 63rpx 0 19rpx 0;
          width: calc(100% - 60rpx);
          margin: 0 30rpx;
        }

        .tag {
          position: absolute;
          top: 0;
          left: 0;
          height: 45rpx;
          line-height: 45rpx;
          padding: 0 30rpx;
          background: #d9f9dd;
          border-radius: 16rpx 0px 16rpx 0px;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #139145;
        }

        .left {
          margin-right: 26rpx;

          .face-price {
            font-size: 42rpx;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            text-align: left;
            color: #0f8849;

            .num {
              font-size: 54rpx;
            }
          }
        }

        .right {
          flex: 1;

          .flex-box {
            display: flex;
            align-items: self-end;
            justify-content: space-between;

            button {
              display: flex;
              align-items: center;
              width: fit-content;
              height: 56rpx;
              line-height: 56rpx;
              padding: 0 28rpx;
              border-radius: 28rpx;
              font-size: 30rpx;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              text-align: center;
              color: #ffffff;
              border: 1px solid #0f8849;
              color: #0F8849;
              white-space: nowrap;

              &.no-have {
                background: #0B844A;
                color: white;
                border: 1px solid #0B844A;
              }
            }

            .condition {
              vertical-align: middle;
              font-size: 24rpx;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              text-align: left;
              color: #808080;
              line-height: 28rpx;
            }

            .tip {
              font-size: 28rpx;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              text-align: left;
              color: #333333;
              line-height: 28rpx;
              margin-top: 5rpx;
            }

            .tip2 {
              font-size: 24rpx;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              text-align: left;
              line-height: 28rpx;
              color: #666666;
              margin-top: 5rpx;
            }
          }
        }

        .bottom {
          padding: 17rpx 30rpx 0 30rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .time {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
          }

          .iconfont2 {
            transition: all 0.3s;

            &.open {
              transform: rotate(180deg);
            }
          }
        }

        .desc {
          padding: 10rpx 30rpx 0 30rpx;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #666666;
        }
      }
    }
  }
</style>
